<template>
    <div
        @dragenter="handleDrapEnter"
        @dragover="handleDrapOver($event)"
        @dragleave="handleDragLeave"
        @drop="handleDrop($event)"
        class="iframeWrap"
    >
        <div
            :class="{
                iframeDrap: true,
                'hover-iframe': hoverFlag,
            }"
        ></div>
        <myIframe
            v-if="pageData.length"
            :key="Date.now()"
            :page-data="pageData"
        />
    </div>
</template>

<script>
import myIframe from './Iframe';
export default {
    name: 'mainTarget',
    data() {
        return {
            hoverFlag: false
        };
    },
    computed: {
        pageData() {
            return this.$store.state.config.data.pageData;
        },
        pageInfo() {
            return this.$store.state.config.data.pageInfo;
        }
    },
    components: {
        myIframe
    },
    methods: {
        handleDrapEnter() {
            this.hoverFlag = true;
        },
        handleDrapOver(e) {
            e.preventDefault();
            this.hoverFlag = true;
        },
        handleDrop(e) {
            e.preventDefault();
            let item = JSON.parse(e.dataTransfer.getData("item"));

            let obj = {
                /* eslint-disable fecs-camelcase */
                page_id: this.pageInfo.id,
                module_name: item.module_name,
                edition: item.edition,
                order_num: this.pageData.length + 1,
                props: '{}'
                /* eslint-enable quotes,comma-dangle */
            };

            this.$http.post("/pageData/add", obj).then((res) => {
                if (res.success) {
                    this.$message({
                        message: "添加模块成功",
                        type: "success",
                    });
                    item.id = res.data.insertId;
                    this.$store.commit("CONFIG_SET", {
                        pageData: [
                            ...this.$utils.deepCopy(this.pageData),
                            item,
                        ],
                    });
                    // let seed = { ...this.pageInfo.seed };
                    // seed.sortList = [...(seed.sortList || []).concat({
                    //     module_name: item.module_name,
                    //     edition: item.edition,
                    //     id: res && res.data &&res.data.id
                    // })]
                    // this.$http.post("/page/update", {
                    //     id: this.pageInfo.id,
                    //     seed:JSON.stringify(seed)
                    // }).then((res) => {
                    //     if(res.success){
                    //         this.$message({
                    //           message: '添加模块成功',
                    //           type: 'success'
                    //         });
                    //         this.$store.commit('CONFIG_SET', {
                    //           pageData: [...this.$utils.deepCopy(this.pageData),item],
                    //           pageInfo: {
                    //             ...this.pageInfo,
                    //             seed
                    //           }
                    //         })
                    //     }
                    // }).catch(e => {
                    //     console.log(e)
                    // })
                }
            });

            this.hoverFlag = false;
        },
        handleDragLeave() {
            this.hoverFlag = false;
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.iframeWrap {
    padding: 10px 16px 0;
    margin: 0 20px;
    position: relative;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;

    .iframeDrap {
        position: absolute;
        width: 100%;
        height: calc(100vh - 40px);
        left: 0px;
        opacity: 0;
        transition: opacity 0.3s;
        z-index: 2;
        background: rgba(173, 249, 232, 0.3);

        &.hover-iframe {
            opacity: 1;
            z-index: 2;
            outline: 2px solid #54b954;
        }
    }
}

.iframe {
    height: 100vh;
    border: none;
    outline: none;
    border: 2px solid #eee;
}
</style>
